<!DOCtype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>vue_05_按键修饰符</title>
</head>
<body>
    <form id="app">
        账号：<input type="text" name="username" v-model='username'/><br />
        密码：<input type="text" name="password" v-model="password"/><br />
        <!-- 按键修饰符，当按下回车键的时候，触发函数，回车键enter，不加的话按下任何键都会触发 -->
        回车按键修饰符：<input type="text" v-on:keyup.enter="submit()" v-model='username' /><br />
        删除按键修饰符：<input type="text" v-on:keyup.delete="deleteSubmit()" v-model='password' /><br />
        <!-- 绑定事件函数，如果没有括号，默认会传递事件对象，如果有括号，要传递事件对象，必须加上$event -->
        测试键代码：<input type="text" v-on:keyup="keyCode" v-model="keyCodeText"/><br />
        <!-- 当键代码为32（回车键）时才会触发函数 -->
        自定义按键代码按键（回车键）修饰符：<input type="text" v-on:keyup.13="ziDingYiCode" /><br />
        <!-- 当要使用按键触发函数时，由于使用键代码很难记住，所以我们可以给按键起名字 -->
        自定义按名字按键（Q键）修饰符：<input type="text" v-on:keyup.Q="ziDingYiCode" /><br />
        <input type="button" value="提交" v-on:click="submit()" >
    </form>
    
    <script src="js/vue.js"></script>
    <script type="text/javascript">
        // 当要使用按键触发函数时，由于使用键代码很难记住，所以我们可以给按键起名字
        Vue.config.keyCodes.Q = 81;

        var vm = new Vue({
            el:"#app",
            data:{
                username:"",
                password:"",
                keyCodeText:""
            },
            methods:{
               submit:function(){
                   console.log(this.username + " "  + this.password);
               },
               deleteSubmit:function(){
                   this.password = "";
               },
               //测试键代码
               keyCode:function(e){
                   this.keyCodeText = "";
                   console.log(e.keyCode);
               },
               ziDingYiCode:function(){
                   console.log("自定义按键");
               }
            }
        });
    </script>
</body>

</html></SCRIPT>